<template>
  <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref,watch, onMounted,onUnmounted, onBeforeUnmount,nextTick } from 'vue';
import * as echarts from 'echarts';
import {
  useGepDataStore,
} from "@/stores/gep";
import {storeToRefs} from "pinia";
const gepDataStore = useGepDataStore();

// 接收图表数据和类型作为 props
const props = defineProps({
  chartData: {
    type: Object,
    required: true,
  },
});

// 创建图表容器引用
const chartContainer = ref(null);
let chartInstance = null;

// 渲染图表的函数
const renderChart = () => {
  if (chartContainer.value) {
    // console.log("chartContainer的宽高", chartContainer.value.clientWidth,chartContainer.value.clientHeight);
    chartInstance = echarts.init(chartContainer.value);
    const options = {
      // backgroundColor: '#504c4c', // 添加背景颜色
      title: props.chartData.title,
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.6)",
        borderColor: "rgba(147, 235, 248, .8)",
        textStyle: {
          color: "#FFF",
        },
        // formatter: '{a}<br /> {b0}: {c0}<br />'
        formatter: function (params) {
          // 添加单位
          var result = params[0].name + "<br>";
          params.forEach(function (item ) {
            // if (item.value) {
            //   result += item.marker + " " + item.seriesName + " : " + item.value + "</br>";
            // } else {
            //   result += item.marker + " " + item.seriesName + " :  - </br>";
            // }

            if (item.value) {
              // 将值转为数字，确保类型为数字
              const value = Number(item.value);
              // 检查整数部分的位数
              const integerPart = Math.floor(value).toString();

              if (integerPart.length > 4) {
                // 整数位超过4位，单位为“亿元”
                const convertedValue = (value / 10000).toFixed(2); // 除以10000并保留两位小数
                // result += item.marker + " " + item.seriesName + " (亿元) : " + convertedValue + "</br>";
                result = item.seriesName + "<br>" + item.marker + " " +  params[0].name + " (亿元) : " + convertedValue + "</br>";

              } else {
                // 整数位不超过4位，单位为“万元”
                const convertedValue = (value).toFixed(2); // 除以10000并保留两位小数
                // result += item.marker + " " + item.seriesName + " (万元) : " + value + "</br>";
                result = item.seriesName + "<br>" + item.marker + " " +  params[0].name + " (万元) : " + convertedValue + "</br>";
              }
            } else {
              result += item.marker + " " + item.seriesName + " :  - </br>";
            }


          });
          return result;
        },
      },
      xAxis: props.chartData.xAxis,
      yAxis: props.chartData.yAxis,

      grid: props.chartData.grid,
      series: props.chartData.series,
    };

    chartInstance.setOption(options);
  }
};

onBeforeUnmount(()=>{
  setTimeout(() => {
    // console.log("@@@@加载图表")
    renderChart();
  },200)
});
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    // 确保 DOM 完全渲染后再调用 nextTick
    nextTick(() => {
      // console.log("确保 DOM 完全渲染后再调用 nextTick,销毁echart实例")
      // chartInstance?.dispose()
      renderChart();
    })
  }, 200);
});

onUnmounted(() => {
  //销毁echart实例，释放资源
  // if (chartInstance.value !== null) {
  //   chartInstance.value.dispose();
  // }
  // console.log("onUnmounted-销毁echart实例，释放资源")
  // chartInstance?.dispose()
  // renderChart();
  // 可选链操作符 ?.，这意味着如果 chartInstance 为 null 或 undefined，则不会调用 dispose 方法，从而避免运行时错误。
})

// 清理 ECharts 实例
// 监听isSubmitted刷新图表
const {isSubmitted,count} = storeToRefs(gepDataStore);
watch(isSubmitted, () => {
  // console.log('watch-count变化了-刷新柱状图表',isSubmitted.value)
  // console.log("watch销毁echart实例，释放资源")
  renderChart();
})
// watch(isSubmitted, () => {
//   console.log('isSubmitted变化了-销毁柱状图表',isSubmitted.value)
//   if (!isSubmitted) {
//     chartInstance.dispose();
//   }
// })

// onBeforeUnmount(() => {
//   if (chartInstance) {
//     chartInstance.dispose();
//   }
// });
</script>

<style scoped>
.chart-container {
  width: 100%;
  min-height: 200px;
  height: 100%; /* 让容器高度为100% */

}
</style>
